<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 浅析jsx源码 怎么摇身一变成dom的 </title>
</head>
<body>
</body>
</html>
<script>
    // 2021-10-03
     
    // 入参解读 创建一个元素需要知道那些信息    
    export function creactElement(type,config,children){}
    /*
        type 用来标识节点的类型   
            ---比如h1 div span这样的标准的html 也可以是react组件类型 或react<>类型  
        config 以对象形式传入 
            ---组件所有的属性都会以键值对的形式存储在config对象中 
        children 以对象形式传入  
            ---它记录的是组件标签之间的嵌套关系 即子节点子元素         
    */

    // 示例代码 
    /*
        <ul className="list">
            <li key='1'>1</li>
            <li key='2'>2</li>
        </ul>
    React.creactElement('ul',{
        // 传入属性键值对 
        className:'list'
        // 从第三个参数开始向后 传入的参数是 children
    },React.createElement('li',{
        key:"1"
    }),1)    
    */


    // createElement函数体拆解 业务逻辑  (转换器 数据处理层)
    /*
        入口  
        React.createElement 
        二次处理key self sourse 四个属性值
        遍历config 筛出可以提供props里的属性
        提取子元素 推入childArray(即props.children) 数组
        格式化 defaultProps
        落脚点 
        结合上述数据作为入参 发起ReactElement调用   
    */ 


    // ReactElement  干了什么？ 创建组装
    
    
    
    
    // render ..
    // 参一 谁    参二 挂载到这(真实的dom) 

















</script>